<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉菜单</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.nav {
				width: 500px;
				margin: 100px auto;
				text-align: center;
			}

			li {
				list-style: none;
			}

			a {
				text-decoration: none;
				font-size: 20px;
				color: black;
			}

			.nav>li {
				float: left;
				margin-left: 20px;
			}

			.nav>li>a:hover {
				background-color: #eee;
			}

			.nav ul {
				display: none;
				border-left: 2px solid #FECC58;
				border-right: 2px solid #FECC58;
			}

			.nav ul>li {
				border-bottom: 2px solid #FECC58;
			}

			.nav ul>li>a:hover {
				background-color: #feebaf;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="#">私信</a>
					</li>
					<li>
						<a href="#">评论</a>
					</li>
					<li>
						<a href="#">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="#">私信</a>
					</li>
					<li>
						<a href="#">评论</a>
					</li>
					<li>
						<a href="#">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="#">私信</a>
					</li>
					<li>
						<a href="#">评论</a>
					</li>
					<li>
						<a href="#">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="#">私信</a>
					</li>
					<li>
						<a href="#">评论</a>
					</li>
					<li>
						<a href="#">@我</a>
					</li>
				</ul>
			</li>
		</ul>
		<script type="text/javascript">
			var nav = document.querySelector('.nav');
			var lis = nav.children;
			for (var i = 0; i < lis.length; i++) {
				lis[i].onmouseover = function() {
					this.children[1].style.display = 'block';
				}
				lis[i].onmouseout = function() {
					// 获取li里面的第二个孩子ul
					this.children[1].style.display = 'none';
				}
			}
		</script>
	</body>
</html>
